<template>
  <div class="shopNav">
    <div class="containers">
      <ul class="topbar-nav">
        <li
          v-for="(dao, index) in nav"
          :key="index"
          class="navItem"
          @click="goNav(dao.path)"
        >
          <span>{{ dao.name }}</span>
        </li>
      </ul>
      <ul class="siteUserInfo" v-if="isShowPage">
        <li class="navItem" @click="login" v-if="!islogin">
          <span>登录</span>
        </li>
        <li class="navItem" @click="register()" v-if="!islogin">
          <span>注册</span>
        </li>
        <li class="navItem" @click="myPersonal" v-if="islogin">
          <span>
            欢迎：{{ username }}
            <el-icon><Avatar /></el-icon>
          </span>
        </li>
        <li class="navItem" @click="loginOut" v-if="islogin">
          <span> 注销账号 </span>
        </li>
        <li class="navItem" @click="myShopCar">
          <span>
            我的购物车
            <el-icon><ShoppingCart /></el-icon>
          </span>
        </li>
        <li class="navItem" @click="myOder">
          <span>
            我的订单
            <el-icon><List /></el-icon>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import {useAuthStore} from "@/stores";

const userStore = useAuthStore();

const router = useRouter();
const route = useRoute();

const nav = ref([
  { name: "商城官网", path: "/home" },
  { name: "下载app", path: "" },
  { name: "协议规则", path: "" },
  { name: "企业团购", path: "" },
  { name: "售后服务", path: "" },
]);

const goNav = (e) => {
  if (e !== "") {
    router.push(e);
  }
};

const islogin = computed(() => {
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  if (!userInfo) {
    return false;
  } else {
    username.value = userInfo.username;
    return true;
  }
});

const login = () => {
  router.push("/login");
};
const register = () => {
  router.push("/register");
};
const myPersonal = () => {
  router.push("/personal");
};
const loginOut = () => {
  localStorage.removeItem("userInfo");
  router.push("/login");
};
const myShopCar = () => {
  router.push("/myshopcar");
};
const myOder = () => {
  router.push("/myoder");
};

const isShowPage = computed(() => {
  if (route.path === "/login" || route.path === "/register") {
    return false;
  } else {
    return true;
  }
});

const username = ref("");
</script>

<style lang="less">
.shopNav {
  display: flex;
  background-color: #5d6064;
  height: 40px;
  line-height: 40px;
}
.containers {
  width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.topbar-nav {
  display: flex;
  width: 900px;
}
.siteUserInfo {
  display: flex;
  width: 500px;
  justify-content: flex-end;
  align-items: center;
}
.navItem {
  padding: 0 15px;
}
.shopNav span {
  color: #d3d3d3;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}
.shopNav span:hover {
  color: #ffffff;
}
</style>